body {
  background-color: #fff;
  color: #292929;
  margin: 0;
  font: normal 12px 'Segoe UI', Tahoma, Arial;
}
a {
  text-decoration: none;
  color: #469;
}
  a:hover {
    text-decoration: underline;
  }
p {
  margin: 0;
}
.cleared:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.icon {
  margin-bottom: -2px;
}

/* the overall width of the page should be 900px */

.heading {
  background-color: #f3f3f3;
  border-bottom: solid 1px #ddd;
  padding: 8px;
}
  /* .cleared */
  .heading .headingInner {
    width: 900px;
    margin: 0 auto;
  }
    .heading .headingInner .left {
      float: left;
    }
      .heading .headingInner .left .logo {
        font-size: 150%;
        font-weight: bold;
      }
      .heading .headingInner .left .school {
        color: #888;
      }
    .heading .headingInner .right {
      float: right;
      text-align: right;
    }
.navigation {
  background-color: #f7f7f7;
  border-bottom: solid 1px #e2e2e2;
  padding: 5px;
}
  .navigation .navigationInner {
    width: 900px;
    text-align: center;
    margin: 0 auto;
  }
    .navigation .navigationInner .item {
      font-size: 120%;
      color: #888;
      display: inline-block;
      padding: 10px;
      margin: 3px 5px;
      cursor: pointer;
    }
      .navigation .navigationInner .item:hover {
        color: #aaa;
        text-decoration: none;
      }
      .navigation .navigationInner .item .icon {
        margin-right: 3px;
      }
      .navigation .navigationInner .item .label {
        /* nothing yet */
      }
    /* TODO: check if the extra :hover is needed to override .item:hover */
    .navigation .navigationInner .item-selected,
    .navigation .navigationInner .item-selected:hover {
      font-weight: bold;
      color: #689;
      cursor: auto;
    }
.main {
  width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}
